<template>
  <n-modal
    :mask-closable="false"
    :close-on-esc="false"
    :title="title"
    :show="show"
    preset="card"
    @close="close"
    :on-after-enter="init"
    :on-after-leave="destroy"
    style="width: 1450px"
  >
    <!-- style="width: 1450px; max-height: 90vh; overflow-y: auto" -->
    <n-form label-placement="left" label-width="auto" ref="formRef" :model="form" :rules="rules">
      <n-form-item label="名人" show-require-mark>
        <n-select
          v-model:value="form.celebrityId"
          :options="celebrityOption"
          @search="handleSearchCelebrity"
          filterable
          remote
          clearable
          :loading="celebrityLoading"
        />
      </n-form-item>
      <n-form-item label="名言" path="content" show-require-mark>
        <MdEditor v-model="form.content" style="height: 300px" />
      </n-form-item>
      <n-form-item label="翻译" path="translate">
        <MdEditor v-model="form.translate" style="height: 300px" />
      </n-form-item>
      <n-form-item label="备注" path="remark">
        <MdEditor v-model="form.remark" style="height: 300px" />
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="close">关闭</n-button>
        <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
      </n-space>
    </template>
  </n-modal>
</template>
<script lang="ts" setup>
import { MdEditor } from 'md-editor-v3'
import { getSaying, postOrPutSaying } from '@/api/literature/Saying'
import { getCelebrity, getCelebrityListByName } from '@/api/literature/Celebrity'

const codeStore = useCodeStore()

const state = reactive({
  form: {} as LiteratureSayingPO,
  celebrityOption: [] as SelectOption[],
  celebrityLoading: false
})

const { form, celebrityOption, celebrityLoading } = toRefs(state)

const props = defineProps({
  title: {
    type: String
  },
  show: {
    type: Boolean
  },
  row: {
    type: Object as PropType<LiteratureSayingPO>,
    required: true
  }
})

const emits = defineEmits<{
  (e: 'handleCloseOnClick'): void
  (e: 'handleSelectOnClick'): void
}>()

const formRef = ref()

const rules: FormRules = {
  id: [
    {
      required: true
    }
  ],
  code: [
    {
      required: true
    }
  ],
  name: [
    {
      required: true
    }
  ],
  status: [
    {
      required: true
    }
  ]
}

const init = async () => {
  if (isEmptyObject(props.row)) return
  const { data } = await getSaying(props.row.id)
  data.translate = data.translate ?? ''
  data.remark = data.remark ?? ''
  state.form = data

  if (!data.celebrityId) return
  state.celebrityLoading = true
  const { data: celebrity } = await getCelebrity(data.celebrityId)
  state.celebrityOption = [{ label: celebrity.name, value: celebrity.id }]
  state.celebrityLoading = false
}

const handleSearchCelebrity = async (value: string) => {
  state.celebrityLoading = true
  const { data } = await getCelebrityListByName(value)
  state.celebrityOption = data.map((ele) => {
    return {
      label: ele.name,
      value: ele.id
    }
  })
  state.celebrityLoading = false
}

const handleConfirmOnClick = async () => {
  formRef.value?.validate(async (errors: any) => {
    if (errors) return
    await postOrPutSaying(state.form)
    select()
    close()
  })
}

const select = () => {
  emits('handleSelectOnClick')
}

const close = () => {
  emits('handleCloseOnClick')
}

const destroy = () => {
  state.form = {} as LiteratureSayingPO
}
</script>
